<template>
	<slot :controller="controller" :store="store" :model="model" :isShow="isShow">
		<AppForm
			v-bind="$attrs"
			ref="searchForm"
			:name="model.codeName"
			:class="classNames"
			:data="store.data"
			style=""
			v-if="isShow"
		>
			<div class="control-content app-control-searchform__content">
				<a-row class="app-control-searchform__left">
					<slot
						name="SearchFormLeft"
						:controller="controller"
						:store="store"
						:model="model"
					>
						<AppCol
							noRoot
							:visible="store.detailModel.n_organization_number_like.visible"
							:layoutOpts="{ parentLayout: 'TABLE_24COL', colLG: 8, colMD: 8 }"
						>
							<template v-slot:default="{ slotStyle, slotClass }">
								<slot
									name="n_organization_number_like"
									:controller="controller"
									:store="store"
									:model="model"
									:slotClass="slotClass"
									:slotStyle="slotStyle"
									:actions="{ handleComponentAction }"
								>
									<AppFormItem
										name="n_organization_number_like"
										:slotStyle="slotStyle"
										:slotClass="slotClass"
										label="机构编号"
										labelPos="LEFT"
										:labelWidth="130"
										:showLabel="true"
										:enableAnchor="false"
										:rules="
											store.detailModel.n_organization_number_like.valueRule
										"
										:emptyCaption="false"
									>
										<div class="form-editor-container">
											<slot
												name="n_organization_number_likeEditor"
												:controller="controller"
												:store="store"
												:model="model"
												:actions="{ handleComponentAction }"
											>
												<AppInput
													v-bind="{ editorType: 'TEXTBOX' }"
													type="text"
													style=""
													name="n_organization_number_like"
													:isDebounce="false"
													:disabled="
														store.detailModel.n_organization_number_like
															.disabled
													"
													:value="store.data.n_organization_number_like"
													@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
												/>
											</slot>
										</div>
									</AppFormItem>
								</slot>
							</template>
						</AppCol>
						<AppCol
							noRoot
							:visible="store.detailModel.n_organization_name_like.visible"
							:layoutOpts="{ parentLayout: 'TABLE_24COL', colLG: 8, colMD: 8 }"
						>
							<template v-slot:default="{ slotStyle, slotClass }">
								<slot
									name="n_organization_name_like"
									:controller="controller"
									:store="store"
									:model="model"
									:slotClass="slotClass"
									:slotStyle="slotStyle"
									:actions="{ handleComponentAction }"
								>
									<AppFormItem
										name="n_organization_name_like"
										:slotStyle="slotStyle"
										:slotClass="slotClass"
										label="名称"
										labelPos="LEFT"
										:labelWidth="130"
										:showLabel="true"
										:enableAnchor="false"
										:rules="
											store.detailModel.n_organization_name_like.valueRule
										"
										:emptyCaption="false"
									>
										<div class="form-editor-container">
											<slot
												name="n_organization_name_likeEditor"
												:controller="controller"
												:store="store"
												:model="model"
												:actions="{ handleComponentAction }"
											>
												<AppInput
													v-bind="{ editorType: 'TEXTBOX' }"
													type="text"
													style=""
													name="n_organization_name_like"
													:isDebounce="false"
													:disabled="
														store.detailModel.n_organization_name_like.disabled
													"
													:value="store.data.n_organization_name_like"
													@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
												/>
											</slot>
										</div>
									</AppFormItem>
								</slot>
							</template>
						</AppCol>
						<AppCol
							noRoot
							:visible="store.detailModel.n_short_name_like.visible"
							:layoutOpts="{ parentLayout: 'TABLE_24COL', colLG: 8, colMD: 8 }"
						>
							<template v-slot:default="{ slotStyle, slotClass }">
								<slot
									name="n_short_name_like"
									:controller="controller"
									:store="store"
									:model="model"
									:slotClass="slotClass"
									:slotStyle="slotStyle"
									:actions="{ handleComponentAction }"
								>
									<AppFormItem
										name="n_short_name_like"
										:slotStyle="slotStyle"
										:slotClass="slotClass"
										label="简称"
										labelPos="LEFT"
										:labelWidth="130"
										:showLabel="true"
										:enableAnchor="false"
										:rules="store.detailModel.n_short_name_like.valueRule"
										:emptyCaption="false"
									>
										<div class="form-editor-container">
											<slot
												name="n_short_name_likeEditor"
												:controller="controller"
												:store="store"
												:model="model"
												:actions="{ handleComponentAction }"
											>
												<AppInput
													v-bind="{ editorType: 'TEXTBOX' }"
													type="text"
													style=""
													name="n_short_name_like"
													:isDebounce="false"
													:disabled="
														store.detailModel.n_short_name_like.disabled
													"
													:value="store.data.n_short_name_like"
													@component-action="(actionParam: IEvent<string>) => { handleComponentAction(controller, actionParam) }"
												/>
											</slot>
										</div>
									</AppFormItem>
								</slot>
							</template>
						</AppCol>
					</slot>
				</a-row>
				<div class="app-control-searchform__right">
					<slot
						name="SearchFormRight"
						:controller="controller"
						:store="store"
						:model="model"
						:actions="{
							handleSearch,
							handleAdvSearch,
							handleShrinkButtonClick,
						}"
					>
						<a-dropdown-button
							:transfer="true"
							:trigger="['click']"
							placement="bottomRight"
							type="primary"
							@click="handleSearch"
						>
							<span>{{ $t('common.searchform.search') }}</span>
							<template #icon>
								<down-outlined />
							</template>
							<template #overlay>
								<a-menu @click="handleAdvSearch">
									<a-menu-item key="reset">
										<div class="app-control-searchform__dropdown__item">
											{{ $t('common.searchform.reset') }}
										</div>
									</a-menu-item>
									<a-menu-item key="save"> </a-menu-item>
								</a-menu>
							</template>
						</a-dropdown-button>
						<a-button
							class="app-control-searchform_shrink"
							v-if="store.hasShrinkButton"
							@click="handleShrinkButtonClick"
							>{{
								store.shrinkButtonStatus
									? $t('common.searchform.shrink')
									: $t('common.searchform.more')
							}}
						</a-button>
					</slot>
				</div>
			</div>
		</AppForm>
	</slot>
</template>
<script setup lang="ts">
// 基于template/src/widgets/{{appEntities}}/{{ctrls@SEARCHFORM}}-searchform/{{spinalCase ctrl.codeName}}-searchform-base.vue.hbs生成
import { AppCol } from '@/components/common/col';
import { AppRow } from '@/components/common/row';
import { DownOutlined } from '@ant-design/icons-vue';
import {
	AppForm,
	AppFormPage,
	AppFormGroup,
	AppFormTabPage,
	AppFormItem,
	AppFormButton,
	AppFormDruipart,
	AppFormIframe,
	AppFormRaw,
} from '@components/widgets/form';
import {
	IEvent,
	IParam,
	ISearchFormAbility,
	ISearchFormStore,
	SearchFormActionType,
} from '@/core';
import {
	useProps,
	useBasic,
	useAction,
	useController,
} from './usr-0301493781-searchform-hook';

let searchForm = ref<any>(null);

// 输入参数
const props = defineProps(useProps());

// 基础数据
const {
	controlID,
	getClassNames,
	model,
	useNavParamsBind,
	useEventBind,
	handleActionClick,
	handleComponentAction,
	useShow,
} = useBasic(props);

const emit = defineEmits<{
	(
		event: 'ctrl-action',
		name: string,
		action: SearchFormActionType,
		data: IParam[]
	): void;
	(event: 'ctrl-init', name: string, data: ISearchFormAbility): void;
	(event: 'ctrl-destroy', name: string, data: IParam): void;
}>();

const evt = useEventBind(emit);
//  搜索表单控制器
const controller = useController(props, evt, { controlID, searchForm });

useNavParamsBind(controller, props);

const store: ISearchFormStore = controller.getStore();

//  部件样式名
const classNames = computed(() => {
	const shrinkClass = {
		'app-control-searchform--shrink': !store.shrinkButtonStatus,
	};
	const defaultClass = getClassNames(props);
	return Object.assign(defaultClass, shrinkClass);
});

const isShow = computed(() => {
	return useShow();
});

const { handleSearch, handleAdvSearch, handleShrinkButtonClick } =
	useAction(controller);

const ctrlService = controller.getCtrlService();

onMounted(() => {
	controller.ctrlMounted();
});
onUnmounted(() => {
	controller.ctrlDestroy();
});
</script>
